﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <div class='input-control select'>
        <select id="idPeriod">
        <option value='0'>Today</option>
        <option value='1'>Yesterday</option>
        <option value='2'>This week</option>
        <option value='3'>Last week</option>
        <option value='4'>This month</option>
        <option value='5'>Last month</option>
        <option value='6'>This year</option>
        <option value='7'>Last year</option>
        <option value='8'>All</option>
        </select>
    </div>
    <ul class="accordion" data-role="accordion">
        <li id='idAccordionIncome'>
            <a id='idIncomeSummary' href="#">Total Income:</a>
            <div id='idAccordionIncomeContent'></div>
            
        </li>
        <li id='idAccordionExpense'>
            <a  id='idExpenseSummary' href="#">Total Expense:</a>
            <div id='idAccordionExpenseContent'></div>
        </li>
    </ul>
</body>
<script type="text/javascript">
    var shown = 0;
    var total = 0;
    var left = 0;

    $(document).ready(function ()
    {
        var periodSelected = 0;
        retrieveSummary(periodSelected);
        $('#idPeriod').change(function ()
        {
            periodSelected = idPeriod.value;
            //fold the Accordion
            $('#idAccordionIncome').removeClass('active');
            $('#idAccordionIncomeContent').empty();
            $('#idAccordionExpenseContent').empty();
            $('#idAccordionExpense').removeClass('active');
            retrieveSummary(periodSelected);
        });

        $('#idAccordionIncome').click(function ()
        {
            if (!$('#idAccordionIncome').hasClass('active'))
            {
                $.ajax({
                    type: "POST",
                    url: "General.ashx",
                    data: "mode=GetRecords&type=AddIncome&start=0&end=999&iPeriod=" + periodSelected,
                    async: false,
                    success: function (data)
                    {
                        var frame = $('#idAccordionIncomeContent');
                        var result = eval('(' + data + ')');
                        frame.append("<h4> Total Incomes: " + result.total + "</h4>");
                        var table = "<table><tr><td></td><td>Category</td><td>Amount</td><td>Date</td></tr>";
                        for (var i = 0; i < result.data.length; i++)
                        {
                            table = table + "<tr>";
                            table = table + "<td>" + i.toString() + "</td>";
                            table = table + "<td>" + result.data[i].category + "</td>";
                            table = table + "<td>" + result.data[i].amount + "</td>";
                            table = table + "<td>" + result.data[i].Date + "</td>";
                            table = table + "</tr>";
                        }
                        table = table + "</table>";
                        frame.append(table);
                    }
                });
            }
            modelActive($('#idAccordionIncome'), $('#idAccordionIncomeContent'));

        });

        $('#idAccordionExpense').click(function ()
        {
            if (!$('#idAccordionExpense').hasClass('active'))
            {
                $.ajax({
                    type: "POST",
                    url: "General.ashx",
                    data: "mode=GetRecords&type=AddExpense&start=0&end=999&iPeriod=" + periodSelected,
                    async: false,
                    success: function (data)
                    {
                        var frame = $('#idAccordionExpenseContent');
                        var result = eval('(' + data + ')');
                        frame.append("<h4> Total Expenses: " + result.total + "</h4>");
                        var table = "<table><tr><td></td><td>Category</td><td>Amount</td><td>Date</td></tr>";
                        
                        for (var i = 0; i < result.data.length; i++)
                        {
                            table = table + "<tr>";
                            table = table + "<td>" + i.toString() + "</td>";
                            table = table + "<td>" + result.data[i].category + "</td>";
                            table = table + "<td>" + result.data[i].amount + "</td>";
                            table = table + "<td>" + result.data[i].Date + "</td>";
                            table = table + "</tr>";
                        }
                        table = table + "</table>";
                        frame.append(table);
                    }
                });
            }
            modelActive($('#idAccordionExpense'), $('#idAccordionExpenseContent'));
        });

    });

    function retrieveSummary(index)
    {
        //income
        $.ajax({
            type: "POST",
            url: "General.ashx",
            data: "mode=GetCategoryIncome&iPeriod=" + index.toString(),
            async: false,
            success: function (data)
            {
                $('#idIncomeSummary').html('Total Income: $' + data);
            }
        });
        //expense
        $.ajax({
            type: "POST",
            url: "General.ashx",
            data: "mode=GetCategoryExpense&iPeriod="+index.toString(),
            async: false,
            success: function (data)
            {
                $('#idExpenseSummary').html('Total Expense: $' + data);
            }
        });
    }
</script>
</html>
